import React from 'react';
import {DatePicker, Button, Form, Select, Input, Row, Col, Modal, Message } from 'antd';
const Option = Select.Option;
const FormItem = Form.Item;
let manualRegistModal = React.createClass({
  getInitialState() {
    return {
      renterList:[]
    }
  },
  handleCancel() {
    this.props.hideModal();
    this.handleReset()
  },
  handleOk() {
    let param = this.props.form.getFieldsValue();
    param.funderBillId = this.props.funderBillId;
    this.props.form.validateFieldsAndScroll((errors, values) => {
        if (!!errors) {
          console.log('Errors in form!!!');
          return;
        }
      Utils.sendAjax({
        url: '/funder/bill/register',
        data: JSON.stringify(param),
        callback: (result) => {
          if (result.code === '200') {
            this.handleCancel();
            Modal.success({
              title: '提交成功', 
            });
          } else {
            Message.error(result.message, 10)
          }
        }
      });
    });
  },
  componentDidMount(){
     var  selectedrecord=this.props.selectedrecord;
     var  funderBillId=this.props.funderBillId;
     var param={
         funderBillId:funderBillId,
         tenementId:selectedrecord.tenementId
     }
     Utils.sendAjax({
          url: '/funder/bill/renterList',
          data: JSON.stringify(param),
          callback: (result) => {
              var renterList = result.data.map((item) => {
                  return (<Option key={item.rentContractId} value={item.rentContractId}>{item.renterName}</Option>);
              });
              this.setState({
                  renterList:renterList
              })
          } 
    });
  },
  handleReset() {
      this.props.form.resetFields();
  },
  render() {
      const { getFieldProps } = this.props.form;

      return (
          <Modal title="手工登记" width={400} visible={this.props.visible} onCancel={this.handleCancel}footer="">
              <Form inline form={this.props.form}>
                  <Row gutter={24} className="form-group">
                      <Col sm={24}>
                          <FormItem label="租客姓名">
                              <Select  {...getFieldProps('rentContractId', { rules: [{ required: true, message: '租客姓名不可为空',type:'number' }] }) } style={{ width: 162 }} >
                                  {this.state.renterList}
                              </Select>
                          </FormItem>
                      </Col>
                  </Row>
                  <Row gutter={24} className="form-group">
                      <Col sm={24}>
                          <FormItem label="收款金额(元)">
                              <Input {...getFieldProps('receiptAmount', { rules: [{ required: true, message: '收款金额不可为空' }, { validator: Utils.number },] }) }/>
                          </FormItem>
                      </Col>
                  </Row>
                  <Row gutter={24} className="form-group">
                      <Col sm={24}>
                          <FormItem label="收款日期">
                              <DatePicker  {...getFieldProps('receiptDate', { rules: [{ required: true, message: '收款日期不可为空' ,type:'date'}]}) } placeholder="请选择收款日期" />
                          </FormItem>
                      </Col>
                  </Row>
                  <Row gutter={24} className="form-group">
                      <Col sm={24}>
                          <FormItem   label="备注">
                              <Input {...getFieldProps('remark', { rules: [{ required: true, message: '备注不可为空' }] }) }/>
                          </FormItem>
                      </Col>
                  </Row>
                  <Row gutter={24} className="form-group">
                      <Col sm={24} >
                          <FormItem   label="对账状态"  >
                              <Select  {...getFieldProps('status', { rules: [{ required: true, message: '必填' }] }) } style={{ width: 162 }} >
                                  <Option value="1">一致</Option>
                                  <Option value="-1">不平</Option>
                              </Select>
                          </FormItem>
                      </Col>
                  </Row>
                  <Row gutter={24}>
                      <Col offset={9} sm={14}>
                          <FormItem >
                              <Button type="primary" onClick={this.handleOk}>提交</Button>
                          </FormItem>
                      </Col>
                  </Row>
              </Form>
          </Modal>
     );
  }
});

manualRegistModal = Form.create()(manualRegistModal);
export default manualRegistModal